<template>
    <el-card class="box-card">
        <div class="illnessBigData-wrapper">
            <div class="firstLineData">
                <pieData :data="waitForBeHospitalizedList" />
                <graphData title="医疗器材消耗" id="instrumenConsumet" :data="instrumenConsumetList"
                    name="equipmentConsume" />
                <graphData title="药品消耗" id="drugConsumetList" :num="100" name="medicineConsume" />
                <graphData title="疫苗综合消耗" id="drugConsumetList" :num="299" name="vaccineConsume" />

            </div>
            <div class="administrativeOffice-wrapper">
                <div style="width: 50%; display: flex; justify-content: space-around;">
                    <div>
                        <segmentationPieData id="current" title="当前科室Top3" />
                    </div>
                    <div>
                        <segmentationPieData id="thisWeek" title="本周科室Top3" />
                    </div>
                </div>
                <div style="width: 50%;">
                    <DoctorData/>
                </div>
            </div>
            <div class="allData">
                <AllData/>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Chart } from '@antv/g2';
import { onMounted, onUpdated } from 'vue';
import { infomationcenterReq } from '@/api/illnessBigData/illnessBigData'
// import { onMounted } from '@vue/runtime-dom';
import pieData from './pie-data.vue'
import graphData from './graph-data.vue'
import segmentationPieData from './segmentationPie-data.vue'
import DoctorData from './doctor-data.vue'
import AllData from './allData.vue'
import { reactify } from '@vueuse/shared';
const data: any = ref([])
const waitForBeHospitalizedList: any = ref([])
console.log(waitForBeHospitalizedList);
let instrumenConsumetList = ref<any>([])
console.log(instrumenConsumetList, 'aaaaaaaaaaaaaaaaaaaaa');

const drugConsumetList = ref([])
const vaccineConsumetList = ref([])
onMounted(async () => {
    await getData()
    console.log(data.value, 'sssssssssssssssssssd');

    waitForBeHospitalizedList.value = data.value.registerCharts?.type.map((item: any, index) => ({
        type: item,
        num: data.value.registerCharts.data[index],
        name: item
    }))
    instrumenConsumetList.value = data.value.drugsCharts.type.map((item, index) => (
        { // title:'',
            type: item,
            data: data.value.drugsCharts.data[index],
            total: data.value.drugsCharts.total
        }
    ))


})
onUpdated(() => {
    console.log(instrumenConsumetList, 'sss');
})
const medicineConsumeList = [
    { year: '周一', quantity: 154 },
    { year: '周二', quantity: 0 },
    { year: '周三', quantity: 100 },
    { year: '周四', quantity: 174 },
    { year: '周五', quantity: 170 },
    { year: '周六', quantity: 310 },
    { year: '周日', quantity: 200 },
]




const getData = async () => {
    let res = await infomationcenterReq()
    console.log(res.data);

    console.log(res.data.drugsCharts);
    console.log(res.data.equipCharts);
    data.value = res.data
    //registerCharts
}
</script>

<style lang="scss" >
.illnessBigData-wrapper {
    // padding-top: 10px;
    width: 100%;
    height: calc(100% - 100px);
    background-color: #fff;
    // border: 1px solid #000;
    box-sizing: border-box;



    .firstLineData {

        width: 100%;
        height: 250px;
        display: flex;
        justify-content: space-between;

        div {
            // padding: 20px;
            width: 23%;
            height: 100%;
            // border: 1px solid red;
            box-sizing: border-box;
        }

        #container {
            margin: auto;
        }
    }

    .equipmentConsume-wrapper {
        margin-top: 10px;
        height: 280px;
        box-sizing: border-box;

        .title {
            margin-bottom: 20px;
            padding: 0;
            width: 300px;
            height: 50px;     
            box-sizing: border-box;

            .num {
                width: 100%;
                height: 20px;
                font-weight: 700;
                font-size: 26px;
            }

        }

        #equipmentConsume {
            width: 100%;
            height: 165px;
        }

        #medicineConsume {
            width: 100%;
            height: 165px;
        }

        #vaccineConsume {
            width: 100%;
            height: 165px;
        }
    }

    .administrativeOffice-wrapper {
        margin-top: 20px;
        display: flex;
        width: 100%;
        height: 250px;
        // background-color: red;
    }

    .allData {
        margin-top: 20px;
        width: 100%;
        height: 250px;
        // background-color: gold;
    }

    .current {
        width: 280px;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
        font-weight: 700;
        text-align: center;
    }
}
::deep.el-card__body{
    padding:0;
}
</style>
